<!--
 * @Author: wangming
 * @Date: 2021-11-01 16:44:26
 * @LastEditors: wangming
 * @LastEditTime: 2021-11-03 09:48:52
 * @FilePath: /hanma-application-designer-fed/src/pageComponents/__components/hlQrcodeDecoder/index.vue
 * @Description: 
-->
<template>
  <div v-if="viewInfo">{{ value }}</div>
  <el-input
    v-else
    placeholder="请上传二维码"
    :value="value"
    @input="vinput"
    :disabled="disabled"
    @change="enter"
  >
    <template slot="append">
      <el-upload
        :before-upload="beforeUpload"
        accept="image/*"
        action=""
        :show-file-list="false"
      >
        <el-button icon="el-icon-full-screen" type="primary"></el-button>
      </el-upload>
    </template>
  </el-input>
</template>

<script>
import myMixin from "@/pageComponents/myMixin";
import vmMixin from "@/pageComponents/vmMixin";
import QrcodeDecoder from "qrcode-decoder";
export default {
  mixins: [myMixin, vmMixin],
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    async beforeUpload(file) {
      try {
        let url =
          window.URL && window.URL.createObjectURL
            ? window.URL.createObjectURL(file)
            : window.webkitURL.createObjectURL(file);
        let qr = new QrcodeDecoder();
        let { data } = await qr.decodeFromImage(url);
        this.$emit("input", data);
        await this.runEventName("change");
      } catch (error) {
        this.$message.error("格式不正确");
      }
      return Promise.reject();
    },
    vinput(v) {
      this.$emit("input", v);
    },
    enter() {
      this.runEventName("enter");
    },
  },
};
</script>

<style scoped lang="scss">
</style>

